/*
 * @Author: Leo.wang wanglizhigs@163.com
 * @Date: 2023-11-09 16:34:03
 * @LastEditors: Leo.wang wanglizhigs@163.com
 * @LastEditTime: 2023-11-10 16:29:26
 * @FilePath: /three-react/src/pages/CurveGeometry/Line1.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import { useEffect, useRef } from "react"
import createRender from '@/createRender';
import * as THREE from 'three'


const state = {}
export default function Page() {

  const container = useRef(null);
  useEffect(() => {
    if (!state.isMounted) {
      createRender(container)(render);
      state.isMounted = true;
    }
  }, [])



  function render(scene) {
    const geometry = new THREE.BoxGeometry(50, 50, 50)
    const material = new THREE.MeshLambertMaterial({
      color: 0x00ffff,
      side: THREE.DoubleSide,
    });
    const mesh = new THREE.Mesh(geometry, material);

    const edges = new THREE.EdgesGeometry(geometry);
    const edgesMaterial = new THREE.LineBasicMaterial({
      color: 0x00ff00,
    })

    const line = new THREE.LineSegments(edges, edgesMaterial)
    mesh.add(line)


    const cylinderGeometry = new THREE.CylinderGeometry(60, 60, 100)
    const cylinderMaterial = new THREE.MeshLambertMaterial({
      color: 0x000fff,
      side: THREE.DoubleSide,
    });
    const cylinderMesh = new THREE.Mesh(cylinderGeometry, cylinderMaterial);
    cylinderMesh.translateX(100)

    const cylinderEdges = new THREE.EdgesGeometry(cylinderGeometry, 10);
    
    const cylinderLine = new THREE.LineSegments(cylinderEdges, edgesMaterial)
    cylinderMesh.add(cylinderLine)
    scene.add(mesh);
    scene.add(cylinderMesh);
  }

  return (
    <div id="container" className="full container" ref={container}></div>
  )
}